<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom title="选择职位" :isAppBtn="false"></HeadCustom>
		<SearchCustom placeholder="搜索职位" :keyword.sync="keyword" @search="serarchList" />
		<view class="fboxRow scroll-wrap" id="scroll-wrap">
			<view class="filter-left">
				<scroll-view scroll-y="true" class="scroll-Y" :style="{height: scrollHeight +'px'}">
					<view class="pt32">
						<view class="nav-item font26 color-6B707C font-ell1" :class="[intoView== 'position'+item.id ? 'color-E8CDA7' : 'color-6B707C']" v-for="item in itemArr" :key="item.id" @click="move(item)">
							{{item.positionName}}
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="filter-center flex1">
				<scroll-view scroll-y="true" class="scroll-Y" :style="{height: scrollHeight +'px'}" :scroll-into-view="intoView" @scroll="scroll">
					<view class="pt32 pb32">
					<view v-for="(item, index) in itemArr" :key="index">
						<template v-if="'position'+item.id == intoView || !intoView">
							<view v-for="(sub, i) in item.childList" :key="i">
								<view class="tit mt32 lh44 font30" :id="'position'+item.id">
									{{sub.positionName}}
								</view>
								<view class="fboxWrap mt16">
									<view class="nav-item lh38 font-ell1" :class="tagsList.includes(cell.positionName)? 'active-btn': 'bg-21242C color-ACB4C7'"
									 v-for="(cell, c) in sub.childList" @click="checkTap(cell)" :key="c">
										{{cell.positionName}}
									</view>
								</view>
							</view>
						</template>
					</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<template v-if="isCheckbox">
			<view class="filter-space"></view>
			<view class="filter-check">
				<view class="hd font30 lh44">选择职位：<text class="font26 color-6B707C">(最多3个)</text></view>
				<view class="bd mt16 fboxRow">
					<Tags tagsClass="fboxRow" :list="tagsList" :isDel="true" :isBorder="true" @del="delTag" />
				</view>
				<view class="ft mt20 fboxRow Ycenter Xcenter">
					<view class="btn flex1 fboxRow Ycenter Xcenter font30 btn-gray" @click="clean">清除</view>
					<view class="btn flex1 fboxRow Ycenter Xcenter font30 color-141720 bg-linear" @click="save">确定</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import {baseListAll} from '@/api/recruit.js';
	import SearchCustom from '@/components/search/search-custom.vue';
	import Tags from '../components/tags.vue';
	export default {
		components:{SearchCustom, Tags},
		data() {
			return {
				theme: getApp().globalData.appTheme,
						globalColor: getApp().globalData.globalColor,
				keyword: '',
				itemArr: [],
				tagsList: [],
				isCheckbox: false,
				pageType: 'publishRecruitment',
				scrollHeight: 0,
				scrollTop: 0,
				intoView: ''
			}
		},
		onLoad(options) {
			console.log('数据', options)
			if(options && options.isCheckbox){
				this.isCheckbox = options.isCheckbox == 1 ? true : false
			}
			// this.isCheckbox = true
			if(options && options.pageType){
				this.pageType = options.pageType
			}
			this.getInit()
		},
		onReady() {
			uni.createSelectorQuery(this)
				.selectAll('#scroll-wrap, .filter-space')
				.boundingClientRect(res => {
					uni.getSystemInfo({
						success: sys => {
							const {screenHeight, windowHeight} = sys
							let h = screenHeight
							res.filter(item=>{
								if(item.id == 'scroll-wrap'){
									h = h - item.top
								}else{
									h = h - item.height
								}
							})
							this.scrollHeight = h
						}
					});
				})
				.exec();
		},
		methods: {
			move(item){
				if(this.intoView == 'position'+item.id){
					this.intoView = ''
				}else{
					this.$nextTick(()=> {
						this.intoView = 'position'+item.id
					})
				}
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},
			scroll: function(e) {
				this.scrollTop = e.detail.scrollTop
			},
			getInit() {
				// 个人
				const vitaTemp = getApp().globalData.vitaTemp
				// 企业
				const recruitmentTemp = getApp().globalData.recruitmentTemp
				
				if(this.pageType == 'publishRecruitment'){
					if(this.isCheckbox){
						this.tagsList = recruitmentTemp.positionType
					}else{
						this.tagsList = [recruitmentTemp.positionType]
					}
				}else if(this.pageType == 'vita'){
					this.tagsList = vitaTemp.expectPositionList
				}else{
					this.tagsList = []
				}
				this.getList()
			},
			getList(){
				baseListAll({positionName: this.keyword }).then(res=>{
					this.itemArr = res.data
				})
			},
			serarchList(){
				this.getList()
			},
			checkTap(e){
				if(this.isCheckbox){
					const index = this.tagsList.indexOf(e.positionName)
					if(index != -1){
						this.tagsList.splice(index, 1)
					}else{
						if(this.tagsList.length < 3){
							this.tagsList.push(e.positionName)
						}else{
							uni.showToast({
								icon: 'none',
								title: '职位最多选择3个'
							})
						}
					}
				}else{
					this.tagsList = [e.positionName]
					console.log('this.tagsList', this.tagsList);
					this.save()
				}
			},
			delTag(index) {
				this.tagsList.splice(index, 1)
			},
			clean(){
				this.tagsList = []
			},
			save(){
				const vitaTemp = getApp().globalData.vitaTemp
				const recruitmentTemp = getApp().globalData.recruitmentTemp
				if(this.pageType == 'publishRecruitment'){
					if(this.isCheckbox){
						recruitmentTemp.positionList = this.tagsList
					}else{
						recruitmentTemp.positionType = this.tagsList.toString()
					}
				}
				if(this.pageType == 'vita'){
					if(this.isCheckbox){
						vitaTemp.expectPositionList = this.tagsList
					}else{
						vitaTemp.position = this.tagsList.toString()
					}
					
				}
				if(this.pageType == 'joinComany'){
					getApp().globalData.filterTemp = {companyPosition: this.tagsList.toString()}
				}
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-wrap{}
	.filter-box{}
	.pt32{padding-top: 32rpx;}
	.pb32{padding-bottom: 32rpx;}
	.filter-left{width: 204rpx;border-right: 1px solid var(--backgroundDivisionColor);}
	.filter-left .nav-item{ padding: 0 24rpx 0 40rpx; height: 82rpx; line-height: 82rpx; }
	.filter-center{padding: 0 0 0 32rpx;}
	.filter-center .nav-item{ margin: 16rpx 16rpx 0 0; padding: 0 24rpx; width: 228rpx;height: 80rpx; line-height: 80rpx;text-align: center; border-radius: 8rpx;}
	.filter-space{height: 368rpx;}
	.filter-check{position: fixed;left: 0;right: 0;bottom: 0; padding: 40rpx 40rpx 54rpx; height: 368rpx;background-color:var(--darkViewBgColor)}
	.filter-check .bd{height: 112rpx;}
	.filter-check .btn {
		height: 76rpx;
		border-radius: 12rpx;
	}
	.filter-check .btn +.btn{margin-left: 24rpx;}
	.active-btn{background: var(--pureButtonBackOneColor);color: var(--contourButtonTextColor);border: 1px solid var(--buttonOutlineOneColor)}
	.btn-gray{background: var(--translucenceButtonBackTwoColor);color: var(--contentFontFourColor);}
</style>
